<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style  type="text/css">
    #areaDiv{
        width: 400px;
        height: 100px;
        border: 1px springgreen solid;
    }
    #showMsg{

        width: 400px;
        height: 100px;
        border: 1px salmon solid;
    }


</style>
<body>
    <div id="areaDiv"></div>
    <div id="showMsg"></div>

</body>

<script>
    window.onload=function(){
        /* 
            鼠标在areaDiv里面移动时，在showMsg里面显示出对应的横纵坐标
         */

         var area=document.getElementById("areaDiv");
         var show=document.getElementById("showMsg");

         /* 
            onmousemove 
                -该事件将会在鼠标在元素中移动时触发


            事件对象
                -当事件的响应函数被触发时，浏览器每次都会将一个时间对象作为实参传递进响应函数

          */

          area.onmousemove=function(event){
              /* 
                clientX-横坐标
                clientY-纵坐标  
               */

               var x=event.clientX;
               var y=event.clientY;
               show.innerHTML="x="+x+"y="+y
          }

    }

</script>
</html>